<template>
  <div class="container-list">
    <el-table
      :data="tableData"
      border
      style="width: 100%;"
    >
      <el-table-column prop="fullName" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号"> </el-table-column>
      <el-table-column prop="userType" label="员工类别"> </el-table-column>
      <el-table-column prop="postName" label="岗位名称"> </el-table-column>
      <el-table-column prop="title" label="称谓"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { updateUser } from '@/api/user'
import { getUsers } from '@/api/organization'
const typeObj = {'0': '在编', '1': '聘用', '2': '劳务派遣'}
export default {
  props: {
    departmentId: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    departmentId(val) {
      this.loadData(val)
    },
  },
  data() {
    return {
      form: {
        fullName: '',
        gender: 0,
        phoneNumber: '',
        userType: '',
        postName: '',
        title: '',
      },
      tableData: [
      ],
    }
  },
  mounted() {
    this.loadData(this.departmentId)
  },
  methods: {
    async loadData(id) {
      if (!id) {
        return
      }
      let loading = this.$$loading('正在加载...')
      let { data } = await getUsers(id)
      // Object.assign(this.form, data)
      data.forEach(a => {
        a.gender = a.gender === 1 ? '男' :'女'
        a.userType = typeObj[a.userType]
      })
      this.tableData = data
      loading.close()
      document.scrollingElement.scrollTop = 0
    },
    async onSubmit() {
      let loading = this.$$loading('请等待...')
      let { data } = await updateUser(this.form)
      loading.close()
      this.form.name = this.form.fullName
      this.$emit('change', this.form)
      this.$message.success('更新成功', '2000')
    },
  },
}
</script>

<style lang="scss" scoped>
  .container-list {
    height: 100%;
    overflow: auto;
  }
</style>
